<template>
  <el-form ref="form" label-width="100px" class="dog-el-form">
    <div v-if="isShowGlobal">
      <div class="d-caption-lead d-section">全局</div>
      <el-form-item label="显示背景色">
        <el-switch v-model="layout.isShowBg"></el-switch>
      </el-form-item>
      <el-form-item label="显示阴影">
        <el-switch v-model="layout.isShowShadow"></el-switch>
      </el-form-item>
      <el-form-item label="显示四角">
        <el-switch v-model="layout.isShowAngle"></el-switch>
      </el-form-item>
      <el-collapse v-model="collapse01" accordion>
        <el-collapse-item title="高级配置" name="1">
          <el-form ref="form" label-width="100px">
            <el-form-item label="内边距">
              <div class="layout-gauge">
                <div></div>
                <el-input v-model="layout.paddingTop" placeholder="上"></el-input>
                <div></div>
                <el-input v-model="layout.paddingLeft" placeholder="左" class="d-col-xs-3"></el-input>
                <div></div>
                <el-input v-model="layout.paddingRight" placeholder="右" class="d-col-xs-3"></el-input>
                <div></div>
                <el-input v-model="layout.paddingBottom" placeholder="下" class="d-col-xs-3"></el-input>
                <div></div>
              </div>
            </el-form-item>
            <el-form-item label="背景色">
              <el-input v-model="layout.bgColor" type="color" placeholder="如：#000c3b"></el-input>
            </el-form-item>
            <el-form-item label="背景图片">
              <div style="float:right;padding-left:4px">
                <Uploader @change="handleChangeBgImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" :multiple="false" />
              </div>
              <div style="overflow: hidden;">
                <el-input v-model="layout.bgImgUrl" placeholder="可输入网络地址、图片base64，如：//daelui.com/xxx.jpg"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="图片尺寸">
              <el-input v-model="layout.bgSize" placeholder="如：100% 100%，默认cover"></el-input>
            </el-form-item>
            <el-form-item label="图片位置">
              <el-input v-model="layout.bgPosition" placeholder="如：left center，默认center center"></el-input>
            </el-form-item>
            <el-form-item label="重复方式">
              <el-select v-model="layout.bgRepeat" placeholder="请选择">
                <el-option
                  v-for="item in bgRepeat"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="阴影">
              <el-input v-model="layout.shadow" placeholder="如：0 2px 12px 0 rgb(0 0 0 / 10%)"></el-input>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-if="isShowHead">
      <div class="d-caption-lead d-section">头部</div>
      <el-form-item label="显示头部">
        <el-switch v-model="layout.isShowHead"></el-switch>
      </el-form-item>
      <el-form-item label="显示边线">
        <el-switch v-model="layout.isShowHeadBorder"></el-switch>
      </el-form-item>
      <el-collapse v-model="collapse02" accordion>
        <el-collapse-item title="高级配置" name="1">
          <el-form ref="form" label-width="100px">
            <el-form-item label="内边距">
              <div class="layout-gauge">
                <div></div>
                <el-input v-model="layout.headPaddingTop" placeholder="上"></el-input>
                <div></div>
                <el-input v-model="layout.headPaddingLeft" placeholder="左"></el-input>
                <div></div>
                <el-input v-model="layout.headPaddingRight" placeholder="右"></el-input>
                <div></div>
                <el-input v-model="layout.headPaddingBottom" placeholder="下"></el-input>
                <div></div>
              </div>
            </el-form-item>
            <el-form-item label="背景色">
              <el-input v-model="layout.headBgColor" type="color" placeholder="如：#000c3b"></el-input>
            </el-form-item>
            <el-form-item label="背景图片">
              <div style="float:right;padding-left:4px">
                <Uploader @change="handleChangeHeadBgImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" :multiple="false" />
              </div>
              <div style="overflow: hidden;">
                <el-input v-model="layout.headBgImgUrl" placeholder="可输入网络地址、图片base64，如：//daelui.com/xxx.jpg"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="图片尺寸">
              <el-input v-model="layout.headBgSize" placeholder="如：100% 100%，默认cover"></el-input>
            </el-form-item>
            <el-form-item label="图片位置">
              <el-input v-model="layout.headBgPosition" placeholder="如：left center，默认center center"></el-input>
            </el-form-item>
            <el-form-item label="重复方式">
              <el-select v-model="layout.headBgRepeat" placeholder="请选择">
                <el-option
                  v-for="item in bgRepeat"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="边线色">
              <el-input v-model="layout.headBorderColor" type="color" placeholder="如：#000c3b"></el-input>
            </el-form-item>
            <el-form-item label="文本颜色">
              <el-input v-model="layout.headTextColor" placeholder="如：#ffffff"></el-input>
            </el-form-item>
            <el-form-item label="文本大小">
              <el-input v-model="layout.headTextSize" placeholder="如：2rem"></el-input>
            </el-form-item>
            <el-form-item label="文本对齐">
              <el-select v-model="layout.headTextAlign" placeholder="请选择">
                <el-option
                  v-for="item in textAlign"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div v-if="isShowBody">
      <div class="d-caption-lead d-section">内容</div>
      <el-collapse v-model="collapse03" accordion>
        <el-collapse-item title="高级配置" name="1">
          <el-form ref="form" label-width="100px">
            <el-form-item label="内边距">
              <div class="layout-gauge">
                <div></div>
                <el-input v-model="layout.bodyPaddingTop" placeholder="上"></el-input>
                <div></div>
                <el-input v-model="layout.bodyPaddingLeft" placeholder="左" class="d-col-xs-3"></el-input>
                <div></div>
                <el-input v-model="layout.bodyPaddingRight" placeholder="右" class="d-col-xs-3"></el-input>
                <div></div>
                <el-input v-model="layout.bodyPaddingBottom" placeholder="下" class="d-col-xs-3"></el-input>
                <div></div>
              </div>
            </el-form-item>
            <el-form-item label="背景色">
              <el-input v-model="layout.bodyBgColor" type="color" placeholder="如：#000c3b"></el-input>
            </el-form-item>
            <el-form-item label="背景图片">
              <div style="float:right;padding-left:4px">
                <Uploader @change="handleChangeBodyBgImg" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" :multiple="false" />
              </div>
              <div style="overflow: hidden;">
                <el-input v-model="layout.bodyBgImgUrl" placeholder="可输入网络地址、图片base64，如：//daelui.com/xxx.jpg"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="图片尺寸">
              <el-input v-model="layout.bodyBgSize" placeholder="如：100% 100%，默认cover"></el-input>
            </el-form-item>
            <el-form-item label="图片位置">
              <el-input v-model="layout.bodyBgPosition" placeholder="如：left center，默认center center"></el-input>
            </el-form-item>
            <el-form-item label="重复方式">
              <el-select v-model="layout.bodyBgRepeat" placeholder="请选择">
                <el-option
                  v-for="item in bgRepeat"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
  </el-form>
</template>

<script>
import Uploader from '@/components/uploader/uploader'
import constant from '../constant.js'

export default {
  components: {
    Uploader
  },

  props: {
    layout: {
      type: Object,
      default() {
        return {

        }
      }
    },
    isShowGlobal: {
      type: Boolean,
      default: true
    },
    isShowHead: {
      type: Boolean,
      default: true
    },
    isShowBody: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      bgRepeat: constant.bgRepeat,
      textAlign: constant.textAlign,
      collapse01: '',
      collapse02: '',
      collapse03: ''
    }
  },

  mounted() {},

  methods: {
    handleChangeBgImg (files) {
      let file = files[0]
      if (file) {
        this.readImageBase64(file.file).then(res => {
          this.layout.bgImgUrl = res
        })
      }
    },
    handleChangeHeadBgImg (files) {
      let file = files[0]
      if (file) {
        this.readImageBase64(file.file).then(res => {
          this.layout.headBgImgUrl = res
        })
      }
    },
    handleChangeBodyBgImg (files) {
      let file = files[0]
      if (file) {
        this.readImageBase64(file.file).then(res => {
          this.layout.bodyBgImgUrl = res
        })
      }
    },
    /**
    * @function 读取为图片为base64
    */
    readImageBase64 (file) {
      return new Promise(function(resolve, reject){
        let reader = new FileReader()
        reader.onload = function () {
          resolve(this.result)
        }
        try {
          reader.readAsDataURL(file)
        } catch(e) {
          reject(e)
        }
      })
    },
  }
}
</script>

<style lang="less">
.dog-el-form {
  .el-form-item .el-select,
  .el-form-item .el-cascader,
  .el-form-item .el-date-editor {
    width: 100%;
  }
  .el-collapse .el-collapse-item__wrap {
    background: none;
  }
  .d-caption-lead {
    font-weight: 700;
  }
}
.layout-gauge {
  display: grid;
  grid-template-areas: '. . .';
  max-width: 200px;
  grid-gap: 4px;
  .d-form-input,
  .el-input__inner {
    text-align: center;
  }
}
</style>
